<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.parent-box {
			width: 200px;
			background: gray;
			border: 5px solid;
		}

		.son-box {
			width: 100px;
			height: 100px;
			background: blue;
			float: left;
		}

		.another-box {
			width: 100px;
			height: 100px;
			background: greenyellow;
		}




		

		.clear::after {
			content: "";
			display: block;
			clear: both;
		}
	</style>
</head>

<body>
	<div class="parent-box clear">
		<div class="son-box"></div>
		<!-- <div style="clear: both;"></div> -->
		<!--  <br clear="all" /> -->
	</div>
	<div class="another-box">123456</div>

	<body>


</html>